<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>购物车</title>
    <script type="text/javascript" src="__TMPL__/public/assets/js/jquery.min.js"></script>
    <script type="text/javascript" src="__TMPL__/public/assets/js/shopping.js"></script>
    <link type="text/css" rel="stylesheet" href="__TMPL__/public/assets/css/base.css" />
    <link type="text/css" rel="stylesheet" href="__TMPL__/public/assets/css/module.css?{:time()}"  />
    <script type="text/javascript" src="__TMPL__/public/assets/js/layer/layer.js"></script>
</head>
<body>

<!--头部开始-->
<div class="header"  style="border-bottom: 1px solid rgba(215, 215, 215, 0.29);">
    <h1>购物车</h1>
    <a href="javascript:history.back(-1);" class="back"><span></span></a>
    <a href="javascript:;" class=""></a>
</div>
<!--头部结束-->
<div class="shopping">
    <empty name="car_list">
    <section class="cart-none" id="cart-none" style="">
        <i class="cart-big"></i>
        <p class="text">您的购物车还没有商品！</p>
        <a href="/" class="btn">去逛逛</a>
    </section>
    </empty>
    <div class="shop-group-item">

        <ul>
            <php>
                $count_post_price=0;
                $count_post_score=0;
            </php>
            <foreach name="car_list" item="vo">
                <php>
                    $more=json_decode($vo['goods']['more'],true);
                    $checked='';
                    if($vo['is_checked']==1){
                        $checked='checked';
                        $count_post_price=$count_post_price+$vo['goods']['post_price']*$vo['num'];
                        $count_post_score=$count_post_score+$vo['goods']['post_score']*$vo['num'];
                    }
                </php>
            <li class="car_list">
                <div class="shop-info">
                    <input type="checkbox" class="check goods-check goodsCheck" {$checked}  data="{$vo['good_id']}">
                    <div class="shop-info-img"><a href="#"><img src="{:cmf_get_image_preview_url($more['thumbnail'])}" /></a></div>
                    <div class="shop-info-text">
                        <h4>{$vo.goods.post_title}</h4>
                        <div class="shop-price">
                            <div class="shop-pices">￥<b class="price"><span>{$vo.goods.post_price}</span><span class="points">+{$vo.goods.post_score}积分</span></b></div>
                            <div class="shop-arithmetic">
                                <a href="javascript:;" class="minus" data="{$vo['good_id']}">-</a>
                                <span class="num" >{$vo.num}</span>
                                <a href="javascript:;" class="plus"  data="{$vo['good_id']}">+</a>
                            </div>
                        </div>
                    </div>
                </div>
                <i data="{$vo['good_id']}" class="del">删除</i>
            </li>
            </foreach>
        </ul>

    </div>


</div>
<style>
    .wjiesuan{background: #eee!important;}
</style>
<div class="payment-bar">
    <div class="all-checkbox"><input type="checkbox" class="check goods-check" id="AllCheck">全选</div>
    <div class="shop-total">
        <strong>合计：<i class="total" id="AllTotal" style="font-style: normal;color: red;">￥{$count_post_price}+{$count_post_score}积分</i><br/><i style="font-style: normal;font-size: 12px;color: #bbbbbb;">(不含运费) </i></strong>

    </div>

    <php>if($count_post_price==0&&$count_post_score==0){</php>
        <a href="{:url('shop/order/index')}"  style="display: none" class="settlement jiesuan">结算<span class="shop-num"></span></a>
    <php>}else{</php>
        <a href="{:url('shop/order/index')}" class="settlement jiesuan">结算<span class="shop-num"></span></a>
    <php>}</php>


    <php>if($count_post_price==0&&$count_post_score==0){</php>
        <a href="javascript:;" class="settlement wjiesuan">结算<span class="shop-num"></span></a>
    <php>}else{</php>
         <a href="javascript:;" class="settlement wjiesuan" style="display: none">结算<span class="shop-num"></span></a>
    <php>}</php>

</div>
<include file="public@footer"/>
<script>
    //侧滑显示删除按钮
    var expansion = null; //是否存在展开的list
    var container = document.querySelectorAll('.shop-group-item ul li .shop-info');
    for(var i = 0; i < container.length; i++){
        var x, y, X, Y, swipeX, swipeY;
        container[i].addEventListener('touchstart', function(event) {
            x = event.changedTouches[0].pageX;
            y = event.changedTouches[0].pageY;
            swipeX = true;
            swipeY = true ;
            if(expansion){   //判断是否展开，如果展开则收起
                expansion.className = "shop-info";
            }
        });
        container[i].addEventListener('touchmove', function(event){

            X = event.changedTouches[0].pageX;
            Y = event.changedTouches[0].pageY;
            // 左右滑动
            if(swipeX && Math.abs(X - x) - Math.abs(Y - y) > 0){
                // 阻止事件冒泡
                event.stopPropagation();
                if(X - x > 10){   //右滑
                    event.preventDefault();
                    this.className = "shop-info";    //右滑收起
                }
                if(x - X > 10){   //左滑
                    event.preventDefault();
                    this.className = "shop-info swipeleft";   //左滑展开
                    expansion = this;
                }
                swipeY = false;
            }
            // 上下滑动
            if(swipeY && Math.abs(X - x) - Math.abs(Y - y) < 0) {
                swipeX = false;
            }
        });
    }
</script>

</body>
</html>

